<template>
	<view class="container">
		<view class="message-item" @click="onMessage(item)" v-for="(item, index) in messageList" :key="index">
			<view class="title">
				<view>系统通知</view>
				<view v-if="!item.is_read" class="dot"></view>
			</view>
			<view class="time">{{ formatRelativeTime(item.created_at) }}</view>
			<view class="content">{{ item.content }}</view>
			<view class="view-detail">
				<view>查看详情</view>
				<view class="right">
					<wd-icon name="arrow-right" size="30rpx"></wd-icon>
				</view>
			</view>
		</view>
		<!-- 加载状态 -->
		<wd-status-tip v-if="messageList.length === 0" image="content" tip="暂无消息" />
		<q-loadmore v-else :state="loadStatus" />
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { baseAPI } from '@/api/index';
import { formatRelativeTime } from '@/utils/timeFormat.js';

//页面公共变量
let pageNum = 1;
const messageList = ref([]);
const loadStatus = ref('');

// 页面生命周期
onLoad(() => {
	getDataList();
});

onShow(() => {});

// 页面函数

function getDataList() {
	baseAPI
		.post('message/getUserMsgList', {
			type: 9,
			page: pageNum
		})
		.then((res) => {
			if (res.code == 200) {
				messageList.value = [...res.result.list, ...messageList.value];
			}
		});
}

function onMessage(message) {
	baseAPI
		.post('message/markAsRead', {
			message_id: message.id
		})
		.then((res) => {
			if (res.code === 200) {
				message.is_read = 1;
			}
		});
}
</script>

<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.message-item {
	background-color: #fff;
	border-radius: 10rpx;
	padding: $base-spacing;
	margin-bottom: 30rpx;

	&:active {
		background-color: #eee;
	}

	.title {
		color: #000;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;

		.dot {
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			background-color: crimson;
			margin-left: 10rpx;
		}
	}

	.time {
		color: #999;
		margin-bottom: 20rpx;
		font-size: 24rpx;
	}

	.content {
		color: #616161;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.view-detail {
		display: flex;
		align-items: center;
		color: #999;
		font-size: 28rpx;

		.right {
			margin-left: auto;
		}
	}
}
</style>
